<template>
  <grid>
    <div class="message-list-body">
      <reply-box :submit="reply"></reply-box>
      <div class="list-content">
        <message-card v-for="message in list"
                      :key="message.id"
                      :message="message"></message-card>
      </div>
      <el-pagination background
                     layout="prev, pager, next"
                     @current-change="fetch"
                     :current-page.sync="query.page"
                     :page-size="query.limit"
                     :total="total">
      </el-pagination>
    </div>
  </grid>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import replyBox from '@/components/reply-box'
import messageCard from './components/card'

export default {
  name: 'messages',
  title: '留言表',
  computed: {
    ...mapGetters('message', ['list', 'total']),
  },
  data () {
    return {
      query: {
        limit: 12,
        page: 1
      },
    }
  },
  components: {
    messageCard, replyBox
  },
  async asyncData ({ store, route }) {
    const { query } = route;
    return store.dispatch('message/fetchList', { page: 1, limit: 12 })
  },
  methods: {
    ...mapActions('message', ['fetchList', 'store']),
    async fetch () {
      const params = { ...this.query }
      await this.fetchList(params)
    },
    async reply (params) {
      await this.store(params)
      this.$message({
        message: '回复成功',
        type: 'success',
        offset: 10
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.message-list-body {
  display: flex;
  flex-direction: column;
  .list-content {
    margin-bottom: 10px;
  }
}
</style>